<template>
  <div class="card-container border-darkred border-1 roundy-5" :class="getColorByType()">

        <table class="table-fixed" cellspacing="5">
            <tbody>
                <tr>
                    <td colspan="2">
                        <table cellspacing="0">
                            <tbody>
                                <tr>
                                    <td class="bg-white roundy-5 
                                    padding-10 text-center">
                                        <b class="font-size-20">{{pokemon?.nameZh}}</b><br>
                                        <b>{{pokemon?.nameEn}}{{pokemon?.nameJa}}</b>
                                    </td>
                                    <td width="10%"></td>
                                    <td class="bg-white roundy-5 
                                    text-center font-size-20">
                                            <b>{{getPokemonIndex()}}</b>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="img-container bg-white roundy-5 padding-20">
                            <img class="pokemon-img" :src="pokemon?.detail.imgUrl" :alt="pokemon?.nameZh">
                            <div class="text-center">官方绘图</div>    
                    </td>
                </tr>
                <tr>
                    <pokemon-card-label label="属性" :class="getColorByType(isLabel=true)">
                            <table cellspacing="0" class="table-fixed">
                                <tbody>
                                    <tr>
                                        <td class="roundy-20 text-white"
                                        :class="getColorByType()">
                                            {{pokemon.type1}}
                                        </td>
                                        <td v-show="pokemon.type2"
                                        class="roundy-20 text-white" :class="getColorByType(isLabel=false, type=pokemon.type2)">
                                            {{pokemon.type2}}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                    </pokemon-card-label>

                    
                    <pokemon-card-label label="分类" :content="pokemon.detail.category" 
                    :class="getColorByType(isLabel=true)"/>
                </tr>
                <tr>
                    <td colspan="2" class="border-darkred border-1 roundy-5 
                    padding-0 text-center" :class="getColorByType(isLabel=true)">
                        <div class="margin-2 font-bold font-size-15">特性</div>
                        <table class="table-fixed">
                            <tbody>
                                <tr>
                                    <td class="bg-white border-1 border-darkred roundy-5 padding-10 text-center">
                                        {{pokemon.ability1}} <span v-show="pokemon.ability2">或</span> 
                                        {{pokemon.ability2}}
                                    </td>
                                    <td class="bg-white border-1 border-darkred roundy-5 padding-10 text-center">
                                        {{pokemon.abilityHide?pokemon.abilityHide:'无'}} <br>
                                        <span class="font-size-10">隐藏特性</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <pokemon-card-label label="身高" :content="pokemon.detail.height" :class="getColorByType(isLabel=true)"/>
                    <pokemon-card-label label="体重" :content="pokemon.detail.weight" :class="getColorByType(isLabel=true)"/>
                </tr>
                <tr>
                    <pokemon-card-label label="体形" :class="getColorByType(isLabel=true)">
                        <img height="25" :src="pokemon.detail.bodyStyle" alt="体形">
                    </pokemon-card-label>
                    <pokemon-card-label label="捕获率" :content="pokemon.detail.catchRate" :class="getColorByType(isLabel=true)"/>
                </tr>
                <tr>
                    <pokemon-card-label label="性别比例" :content="pokemon.detail.genderRatio" 
                    :class="getColorByType(isLabel=true)" colspan="2"/>
                </tr>
                <tr>
                    <td colspan="2" class="border-darkred border-1 roundy-5 
                    padding-0 text-center" :class="getColorByType(isLabel=true)">
                        <div class="margin-2 font-bold font-size-15">培育</div>
                        <table class="table-fixed">
                            <tbody>
                                <tr>
                                    <td class="bg-white border-1 border-darkred roundy-5 padding-10 text-center">
                                        {{pokemon.detail.eggGroup1}} <span v-show="pokemon.detail.eggGroup2">与</span> 
                                        {{pokemon.detail.eggGroup2}}
                                    </td>
                                    <td class="bg-white border-1 border-darkred roundy-5 padding-10 text-center">
                                        孵化步数 <br>
                                        {{pokemon.detail.hatchTime}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="2" class="tips text-center font-size-15 font-bold">
                        所属第{{pokemon.generation}}世代
                    </td>
                </tr>
            </tfoot>
        </table>

    </div>
</template>

<script>
import PokemonCardLabel from './PokemonCardLabel.vue'

export default {
    name: "PokemonCard",
    components: {
        PokemonCardLabel,
    },
    props: ["pokemon", "getColorByType", "getPokemonIndex"],
}
</script>

<style lang="less" scoped>
.card-container {
    width: 500px;
    min-width: 320px;
}

table{
    width: 100%;
}

.pokemon-img {
    width: 100%;
}

@media screen and (max-width: 600px) {
    .card-container {
        width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (min-width: 601px) {
    .card-container {
        margin-left: auto;
        margin-right: auto;
    }
}

</style>